---
interface Props {
  class?: string;
  value?: string;
}

const { class: className, value } = Astro.props;
---

<div class:list={["card", className]}>
  <calendar-range months="2" value={value}>
    <svg
      aria-label="Previous"
      slot="previous"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path d="M15.75 19.5 8.25 12l7.5-7.5"></path>
    </svg>
    <svg
      aria-label="Next"
      slot="next"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
    </svg>

    <div class="grid">
      <calendar-month></calendar-month>
      <calendar-month offset="1"></calendar-month>
    </div>
  </calendar-range>
</div>

<style is:global>
  .card {
    --border: #dcdfe5;
    --radius: 4px;
    --icon-color: #666;
    --accent: var(--color-accent);

    padding: var(--space-m-l);
    border-radius: 5px;
    border: 1px solid var(--border);
    background: white;
    box-shadow:
      0 1px 5px rgba(0, 0, 0, 0.05),
      0 0 30px rgba(0, 0, 0, 0.01);
    inline-size: fit-content;
    margin-inline: auto;

    .grid {
      display: flex;
      gap: 1em;
      justify-content: center;
      flex-wrap: wrap;
    }

    calendar-range {
      svg {
        height: 16px;
        width: 16px;
        fill: none;
        stroke: var(--icon-color);
        stroke-width: 1.5;
      }

      path {
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      &::part(button) {
        width: 30px;
        height: 30px;
        border: 1px solid var(--border);
        background: white;
        color: var(--icon-color);
        border-radius: var(--radius);
      }

      &::part(button):is(:hover, :focus-visible) {
        --icon-color: black;
      }

      &::part(button):hover {
        background: rgba(0, 0, 0, 0.02);
      }

      &::part(button):focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: -1px;
      }
    }

    calendar-month {
      --color-accent: var(--accent);

      &::part(button) {
        border-radius: var(--radius);
      }

      &::part(today) {
        color: var(--color-accent);
      }

      &::part(today selected),
      &::part(today):focus-visible {
        color: white;
      }

      &::part(range-inner) {
        border-radius: 0;
      }

      &::part(range-start) {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
      }

      &::part(range-end) {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
      }

      &::part(range-start range-end) {
        border-radius: var(--radius);
      }
    }
  }
</style>
